<!-- 公共集合 -->
<style lang="scss">
    .workflow-itemview{
        margin-bottom:10px;
        border:1px solid #e4e7ed;
        background: #ffffff;
        padding-left:140px;
        position: relative;
        .list-item{
            padding:10px 0;
            padding-left:50px;
            position: relative;
            &::after{
                content: "";
                position: absolute;
                bottom:0;
                left:0;
                height:1px;
                width:100%;
                background: #f3f3f3;
            }
            &:last-child:after{
                display: none;
            }
            .title{
                font-size: 14px;
                font-weight: 400;
                color: #333333;
                cursor: pointer;
                line-height: 24px;
                position: relative;
                &:hover{
                    color:#0050a0;
                }
                .time{
                    color: #868686;
                }
            }
            .content{
                font-size: 12px;
                line-height: 26px;
                color: #868686;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding-right:100px;
                .once{
                    color:#f19b2c;
                }
                .repeat{
                    color:#128c4e;
                }
            }
            .photo{
                position: absolute;
                top: 15px;
                left: 0;
            }

            .actions{
                position: absolute;
                right: 0;
                top: 32px;
                font-size: 14px;
                line-height: 30px;
                color:#868686;
                *{
                    margin-left:10px;
                }
                i{
                    font-size:14px !important;
                    cursor: pointer;
                }
            }
            .time-text{
                    position: absolute;
                    right: 0;
                    top:14px;
                    color: #868686;
                }
                .time-text.red-box::before{
                    content: "";
                    width:6px;
                    height:6px;
                    border-radius: 100%;
                    background: #0050a0;
                    position: absolute;
                    left: -16px;
                    top: 5px;
                }
        }
        .color-gold{
            color:#0050a0;
        }
        .itemview-search{
            padding: 5px 20px;
            background: #f4f7fd;
            color: #333333;
            .search{
                color:#0050a0;
                cursor: pointer;
                margin-left: 10px;
            }
            .el-input{
                width:200px;
            }
            .createTask{
                font-size: 14px;
                cursor: pointer;
                color: #0050a0;
                margin-right:10px;
            }
            .radio-group{
                padding : 10px 0 10px;
                font-size: 12px;
                vertical-align: inherit;
                label{
                    font-weight: normal;
                    .el-radio__label{
                        font-size: 12px;
                    }
                }
            }
        }
        .je-vue-listview{
            padding:0;
            .listview-body{
                padding:10px 20px;
                height: 380px;
              }
            .je-vue-pagebar{
                background: #f4f7fd;
                height: 50px;
                line-height: 50px;
                padding: 0 20px;
            }
        }
        .itemview-tree{

        }
    }
</style>
<template>
  <div class="workflow-itemview">
    <item-tree
      ref="tree"
      @itemClick="sertchTree"
      :data="menuData"
      :treeExpandData="treeExpandData"
    />
    <div class="itemview-body">
      <!-- 查询 -->
      <div class="itemview-search">
        {{ keywordLabel || $t('_workflow.keyword') }}：
        <el-input
          v-model="_keyword"
          @keyup.enter.native="load"
          @input="inputChange($event)"
          @clear="load"
          size="mini"
          style="width:110px;"
          placeholder=""
          clearable
        />
        <span
          @click="load"
          class="search"
        >{{ $t('_workflow.search') }}</span>
        {{ $t('_workflow.date') }}：<el-date-picker
          v-model="time"
          :start-placeholder="$t('_workflow.begin')"
          :end-placeholder="$t('_workflow.end')"
          @change="load"
          size="mini"
          type="daterange"
          style="width:205px;"
          range-separator="——"
        />
        <el-radio-group
          v-model="isNandY"
          @change="load"
          v-if="['APPROVED','OWNER'].indexOf(this.type) != -1"
          class="radio-group"
        >
          {{ $t('_workflow.screening') }}：
          <el-radio label="0">
            {{ $t('_workflow.unfinished') }}
          </el-radio>
          <el-radio label="1">
            {{ $t('_workflow.finished') }}
          </el-radio>
        </el-radio-group>

        <!-- <el-radio-group
          v-model="isNandY"
          @change="load"
          v-if="['APPROVED','OWNER'].indexOf(type) != -1"
          class="radio-group"
        >
          {{ $t('_workflow.screening') }}：
          <el-radio label="0">
            {{ $t('_workflow.unfinished') }}
          </el-radio>
          <el-radio label="1">
            {{ $t('_workflow.finished') }}
          </el-radio>
        </el-radio-group> -->
      </div>
      <!-- 列表 -->
      <je-listview
        ref="list"
        v-loading="loading"
        :total-count="totalCount"
        :page-size="pageSize"
        :empty-height="emptyHeight"
        :item-height="itemHeight"
        :pageBarHeight="pageBarHeight"
        @buildData="buildData"
      >
        <!-- 数据项 -->
        <div
          slot="listitem"
          v-for="(item,index) in data"
          :key="index"
          class="list-item"
        >
          <!-- 标题 -->
          <div
            @click="itemClick(item,index)"
            v-html="getTitle(item)"
            class="title"
          />
          <!-- <div
            @click="itemClick(item,index)"
            v-html="getTitleFinished(item)"
            v-show="isNandY=='1'"
            class="title"
          /> -->
          <!-- 日期 -->
          <!-- <div
            :class="{'red-box':item.priority == '1'}"
            class="time-text"
          > -->
          <div
            class="time-text"
          >
            {{ validateTime(item) }}
          </div>
          <!-- 内容 -->
          <div
            v-html="getContent(item)"
            class="content"
          />
          <!-- <div
            v-html="getContent(item)"
            v-show="isNandY=='0'"
            class="content"
          ></div> -->
          <!-- <div
            v-html="getContentFinished(item)"
            v-show="isNandY=='1'"
            class="content"
          /> -->
          <!-- 头像 -->
          <div
            v-html="getPhoto(item)"
            class="photo"
          />
          <!-- <div
            v-html="getPhoto(item)"
            v-show="isNandY=='0'"
            class="photo"
          /> -->
          <!-- <div
            v-html="getPhotoFinished(item)"
            v-show="isNandY=='1'"
            class="photo"
          /> -->

          <div class="actions">
            <!-- <el-tooltip
              class="item"
              manual="false" -->
            <!-- <i
                v-if="item.TASK_CURRENTTASK != '1'"
                @click="itemClick(item,index)"
                style="font-style: normal;"
              >更早</i>
              <i
                v-if="item.TASK_CURRENTTASK == '1'"
                @click="itemClick(item,index)"
                style="font-style: normal;"
              >已结束</i> -->
            <!-- </el-tooltip> -->
            <el-tooltip
              :content="$t('_workflow.form')"
              class="item"
              effect="dark"
              placement="bottom-start"
            >
              <i
                @click="itemClick(item,index)"
                class="fa fa-file-text-o"
              />
            </el-tooltip>
          </div>
        </div>
        <slot
          slot="listitem"
          name="listitem"
        />
      </je-listview>
    </div>
  </div>
</template>
<script>
import ListView from '../../../../components/listview/listview';
import ItemTree from './item_tree.vue';
import Action from './action.js';
import Util from '../../util/util.js';

export default {
  name: 'ItemView',
  components: { 'je-listview': ListView, ItemTree },
  mixins: [Action],
  props: {
    type: String,
    pageSize: Number,
    menuData: Array,
    treeExpandData: Array,
    keywordLabel: String,
  },
  data() {
    return {
      doReadInfo: {}, // 已读人员
      time: [], // 时间区间查询
      taskFlCode: '',
      keyword: '', // 关键字查询
      _keyword: '',
      isNandY: '0', // 流程是否完结
      type: this.type, // 类型
      totalCount: 0, // 总条数，绑定分页条
      pageSize: this.pageSize,
      data: [],
      currentUser: { ...JE.USER },
      user: JE.getCurrentUser().hrUser,
      menuData: this.menuData, // 菜单数据
      treeExpandData: this.treeExpandData,
      loading: true,
      emptyHeight: 180, // 空数据的容器高
      itemHeight: 24, // 数据项高
      pageBarHeight: 300, // 分页条高度，减去解决全屏问题
      task_readuser: '',
    };
  },
  computed: {
    startDate() {
      return this.time && this.time[0] ? Ext.Date.format(this.time[0], 'Y-m-d') : '';
    },
    endDate() {
      return this.time && this.time[1] ? Ext.Date.format(this.time[1], 'Y-m-d') : '';
    },
  },
  mounted() {
    this.load();
  },
  methods: {
    inputChange(e) {
      this.$forceUpdate();
    },
    itemClick(item, index) {
      const me = this;
      if (this.type == 'PREAPPROV') {
        const readUsers = item.TASK_READUSER;
        if (readUsers.indexOf(this.currentUser.id) == -1) {
          // const newReadUsers = JE.isNotEmpty(readUsers) ? `${doReadInfo.JE_CORE_TASK_ID},${item.JE_CORE_TASK_ID}` : item.JE_CORE_TASK_ID;
          this.doReadTask(item);
        }
      }
      let tableCode = item.TASK_VIEWTABLECODE;
      if (JE.isEmpty(tableCode)) {
        tableCode = item.TASK_TABLECODE;
      }
      const obj = JE.ajax({
        url: JE.getUrlMaps('je.core.getInfoById'), // 获得数据的地址
        params: {
          tableCode,
          pkValue: item.TASK_PKVALUE,
        },
      });
      if (obj.success != false) {
        JE.showFunc(
          item.TASK_FUNCCODE,
          // 写死,
          {
            useChild: true,
            values: obj,
            height: JE.getBodyHeight() - 50,
            width: JE.getBodyWidth() - 50,
            readOnly: false,
            type: 'form',
            callback(panel) {
              const win = panel.up('window');
              win.maximize();
              win.on('close', (win) => {
                const SY_PREAPPROVUSERS = panel.form.findField(
                  'SY_PREAPPROVUSERS'
                );
                const { wfInfo } = panel;
                if (!SY_PREAPPROVUSERS) {
                  return;
                }
                const preapprovUser = SY_PREAPPROVUSERS.getValue();
                let flag = true;
                // 如果待审批人有多个   则也刷新表格   因为会签操作和传阅操作可能有多个  也执行了。
                if (
                  !Ext.isEmpty(preapprovUser)
                                    && preapprovUser.split(',').indexOf(JE.currentUser.userId) != -1
                ) {
                  flag = false;
                  if (wfInfo && wfInfo.btns.indexOf('wfSubmitBtn') == -1) {
                    flag = true;
                  }
                }
                // 如果是会签   则判断当前表单如果含有改签则代表已处理会签。 刷新表格
                if (wfInfo && wfInfo.btns.indexOf('wfChangePassBtn') != -1) {
                  flag = true;
                }
                if (flag) {
                  // 加表格刷新
                  me.load();
                }
              });
            },
          }
        );
      }
      // JE.showFunc(item.TASK_FUNCCODE, { id: item.TASK_PKVALUE, type: 'form', useChild: true,  });
    },
    // getSelectNode() {
    //   return this.$refs.tree.selectNode;
    // },
    /**
     * 获得分页信息
     */
    getList() {
      return this.$refs.list;
    },
    getTitle(item) {
    // #d24d57
      let bs = '';
      if (this.type == 'PREAPPROV') {
      // 未读/已读标识
        bs = ' <div style="background:#d24d57;display:inline-block;width:5px;height:5px;border-radius: 100%;vertical-align: middle;margin-right:5px;"></div>';
        if (item.TASK_READUSER.indexOf(this.currentUser.id) != -1) {
          bs = ' <div style="background:#d9d9d9;display:inline-block;width:5px;height:5px;border-radius: 100%;vertical-align: middle;margin-right:5px;"></div>';
        }
      }
      const time = Ext.Date.format(Ext.Date.parse(item.TASK_TASKTIME, 'Y-m-d H:i:s'), 'm月d日');
      if (item.TASK_TASKTYPE_CODE == 'WF') {
        let flowUserInfo = this.getFlowUserInfo(item, this.type);
        if (flowUserInfo.indexOf('undefined') != -1) {
          flowUserInfo = flowUserInfo.replace(/undefined/g, '');
        }
        return `${bs}${Util.formatKeyword(flowUserInfo, this.keyword)}，${item.TASK_NAME} <span class="time">${time}</span>`;
      }
      return `${bs}${item.TASK_NAME} <span class="time">${time}</span>`;
    },
    /**
	 * 获取待办任务  首页工作台展示
     * @param taskInfo
     * @returns {*}
     */
    getFlowUserInfo(taskInfo, type) {
      const bean = taskInfo;
      // var displayConfigInfo=taskInfo.displayConfigInfo;
      let wfLogLang = JE.getLocalLang('core.jewfview.wfFlowInfo');
      if (type) {
        if (type == 'APPROVED' || type == 'OWNER') {
          for (const wf in wfLogLang) {
            if (wfLogLang[wf].indexOf('我') != -1) {
              wfLogLang[wf] = wfLogLang[wf].split('我')[0];
            }
          }
        } else {      
          wfLogLang = {
            to_submit: '送交给我',
            to_jump: '送交给我',
            to_allot: '调拨给我',
            to_returnsubmit: '送交给我',
            to_rollback: '退回给我',
            to_withdraw: '取回',
            to_entrust: '委托给我',
            to_returnback: '退回给我',
            to_callentrust: '撤销委托',
            to_transmit: '转办给我',
            to_taketask: '领取任务',
            to_end: '流程结束',
            to_round: '传阅给我',
            to_takeround: '审阅',
            to_circular: '办理',
            to_reject: '驳回',
            no: '未处理',
            yes: '已处理',
            to_pass: '通过',
            to_nopass: '不通过',
            to_waiverpass: '弃权',
            to_userdiy: '转交',
            to_backuserdiy: '转交',
          };
        }
      }
      if (JE.isNotEmpty(bean.TASK_FLOWINFO)) {
        if (bean.TASK_END == '1') {
          return `『${bean.TASK_STARTUSER}发起的』`;
        }
        const { TASK_CURRENTTASK } = bean;
        let flowObj = JE.toObj(bean.TASK_FLOWINFO);
        flowObj = JE.isNotEmpty(flowObj) ? flowObj : '{}';
        let tranName = '';
        if (type && flowObj) {
          if (type == 'APPROVED' || type == 'OWNER') {
            tranName = Ext.value(wfLogLang[flowObj.tranCode] + bean.TASK_USERNAMES, '未知动作');
          } else if (flowObj.tranCode) {
            tranName = Ext.value(wfLogLang[flowObj.tranCode], '未知动作');
          } else {
            tranName = '送交给我';
          }
        }
        if (JE.isNotEmpty(tranName)) {
          const userName = JE.isNotEmpty(flowObj.userName) ? flowObj.userName : bean.SY_LASTFLOWUSER;
          /* if(JE.isNotEmpty(displayConfigInfo)){
					return userName+"『已审批』";
        } */
          return `${userName}『${tranName}』`;
        } if (flowObj) {
          flowObj.userName;
        } else {
          return bean.TASK_FLOWUSER;
        }
      } else if (JE.isNotEmpty(bean.TASK_FLOWUSER)) {
        return bean.TASK_FLOWUSER;
      } else {
        return '';
      }
    },


    getTitleFinished(item) {
      const time = Ext.Date.format(Ext.Date.parse(item.SY_CREATETIME, 'Y-m-d H:i:s'), 'm月d日');
      return 'title';
      // return `${item.bean.SY_CREATEUSERNAME} 提交的${item.funcName}，审批结束 <span class="time">${time}</span>`;
    },
    getPhoto(item) {
      if (item.TASK_END == '1') {
        return JE.getUserPhoto(item.TASK_STARTUSERID, true);
      }
      return JE.getUserPhoto(item.TASK_FLOWUSERID, true);
    },
    getPhotoFinished(item) {
      if (!item.bean) return;
      return JE.getUserPhoto(item.bean.SY_CREATEUSERID, true);
    },
    validateTime(item) {
      if (item.TASK_END == '1') {
        return '已结束';
      }
      return JE.getDate4Msg(Ext.Date.parse(item.TASK_TASKTIME, 'Y-m-d H:i:s'));
    },
    /**
             * 任务内容
             */
    getContent(item) {
      // return JE.Action.getFlowCommentInfo(item);
      // if (item.TASK_TASKTYPE_CODE == 'WF') {
      //   return `需处理任务:${item.TASK_CURRENTTASK}`;
      // }
      return `${item.TASK_CONTENT}`;
    },

    /**
     * 展示审批意见    首页工作台展示
      * @param taskInfo
      * @returns {*}
      */
    getFlowCommentInfo(taskInfo) {
      const { bean } = taskInfo;
      if (JE.isNotEmpty(bean.SY_LASTFLOWINFO)) {
        const flowObj = JE.toObj(bean.SY_LASTFLOWINFO);
        if (flowObj) {
          bean.SY_LASTFLOWCOMMENT = flowObj.comment;
        }
      }
      let comment = `需处理任务:${taskInfo.taskName}`;
      if (JE.isNotEmpty(bean.SY_LASTFLOWCOMMENT)) {
        comment = `意见:${bean.SY_LASTFLOWCOMMENT}`;
      }
      const { displayConfigInfo } = taskInfo;
      if (!Ext.isEmpty(displayConfigInfo)) {
        comment = JE.toXT(displayConfigInfo, taskInfo);
      }
      return comment;
    },
    getContentFinished(item) {
      // if (item.bean && item.bean.endInfo) {
      //   return `${item.bean.endInfo.assignee} 意见: ${item.bean.endInfo.comments}`;
      // }
      return '';
    },
    formatTime(time) {
      return Ext.Date.format(Ext.Date.parse(time, 'Y-m-d H:i:s'), 'm/d H:i');
    },
    load() {
      this.keyword = this._keyword;
      this.getList().load();
    },
    sertchTree(val) {
      if (val.code == 'WF') {
        this.taskFlCode = '';
        this.buildData();
      } else {
        this.taskFlCode = val.code;
        this.buildData();
      }
    },
  },
};
</script>
